<template>
	<view class="page">
		<view class="title">
			3.10.【B站登录案例】表单focus和blur事件用法
		</view>
		<view class="p">
			<view class="box login-box" :class="ispassword ? 'active' : ''">
				<view class="p flex center">
					手机号： <input type="text" value="" placeholder="请输入手机号" class="input item" />
				</view>
				<view class="p flex center">
					密 码：<input type="safe-password" value="" placeholder="请输入密码" class="input item" @focus="onfocus"
						@blur="onblur" />
				</view>

			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	const ispassword = ref(false)

	const onfocus = () => {
		ispassword.value = true
	}
	const onblur = () => {
		ispassword.value = !ispassword.value
	}
</script>

<style lang="scss" scoped>
	.login-box {
		padding: 48rpx 24rpx 120rpx;
		background-image: url('https://env-00jxt1ebvd3g.normal.cloudstatic.cn/uniapp/eyes.png');
		background-size: auto 100rpx;
		background-position: left bottom;
		background-repeat: no-repeat;
	}

	.active {
		background-image: url('https://env-00jxt1ebvd3g.normal.cloudstatic.cn/uniapp/hide.png');
	}
</style>